<template>
  <div class="classroom-container">
    <h3>我的收藏</h3>
    <!-- <div class="classroom-filter">
      <el-form ref="filterFormRef" :model="filterForm" @submit.native.prevent>
        <el-form-item label="视频名称" class="filter-name">
          <div style="display: flex">
            <el-input v-model="filterForm.name" style="width: 300px; margin-right: 20px" maxlength="30"
                      placeholder="请输入视频名称"></el-input>
            <div class="flex-1"></div>
            <el-button type="primary">搜索</el-button><el-button>重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div> -->
    <el-tabs type="border-card" v-model="filterForm.menuCode" @tab-click="handleTabsClick">
      <el-tab-pane v-for="tab in tabList" :key="tab.id" :label="tab.collectName"
                   :name="tab.id">
      </el-tab-pane>
    </el-tabs>
    <List :dataList="contestList" @refresh="getPageList" />
  </div>
</template>

<script>
import List from '../../components/recordList'
// eslint-disable-next-line import/no-cycle
import { getCollectInfoPage } from '@/api/classroom/learnVideoManage'
import { getCollectMenu } from '@/api/classroom/directoryManage'
import { mapGetters } from 'vuex'

export default {
  name: 'MyCollection',
  components: { List },
  data() {
    return {
      contestList: [],
      filterForm: {
        menuCode: null
      },
      tabList: [],

      queryParams: {
        pageNo: 1, // 页码
        pageSize: 10, // 页容量
        // collectMenuId: null
        studentId: ''
      },
      userId: this.$store.getters.userId
      // userId: "",
    }
  },
  computed: {
    ...mapGetters(['studentInfo'])
  },
  watch: {
    studentInfo: {
      handler(val) {
        if (val.id) {
          this.queryParams.studentId = this.studentInfo.id
          this.getList()
        } else {
          this.$alert('您还没有学生，无法查看收藏列表，快去添加学生吧', '提示', {
            confirmButtonText: '去添加',
            showClose: false,
            callback: () => {
              this.$router.push({
                path: '/onlineClassroom/studentInfo'
              })
            }
          })
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    // 初始化，获取菜单
    // this.getMenu()
  },
  methods: {
    getMenu() {
      const data = {
        userId: this.userId
      }
      getCollectMenu(data).then((res) => {
        if (res.code == '00000') {
          this.tabList = res.data.rows
          // 初始化页面默认查询
          const tab = {
            name: res.data.rows[0].id
          }
          this.handleTabsClick(tab)
        }
      })
    },
    getList() {
      getCollectInfoPage(this.queryParams).then((res) => {
        if (res.code == '00000') {
          this.contestList = res.data.rows.map((item) => {
            return {
              ...item.videoInfo,
              collectSts: item.collectSts,
              vedioDict: '2', // 信息分类1浏览历史2我收藏
              collectId: item.id
            }
          })
        }
      })
    },
    // 选项卡
    handleTabsClick(tab) {
      this.filterForm.menuCode = tab.name
      this.queryParams.collectMenuId = tab.name
      this.getList()
    },
    getPageList(data) {
      this.queryParams = { ...this.queryParams, ...data }
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.classroom-container {
  .classroom-filter {
    position: relative;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 3px 6px #00000029;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
::v-deep .el-tabs--border-card > .el-tabs__content {
  padding: 0;
}
::v-deep .el-tabs--border-card {
  border: none;
  border-top: 1px solid #DCDFE6;
}
::v-deep .el-tabs__item {
  font-size: 18px;
  height: 55px;
  line-height: 55px;
}
::v-deep .classroom-list-wrap {
  padding-top: 0;
}
</style>
